<!-- 审批工作报表，显示页面 -->
<template>
  <h2>审批报表</h2>
  <div style="display: flex; justify-content: space-between">
    <div style="display: flex">
      <div>
        <input
          type="date"
          v-model="dateinput"
          class="dateinput"
          @change="inputblur()"
        />
        <span style="margin-left: 15px; margin-right: 15px">至</span>
        <input type="date" class="dateinput" @blur="inputblur()" />
      </div>

      <!-- 搜索栏 -->
      <div style="margin-left: 30px; width: 520px">
        <el-input v-model="input" placeholder="" style="width: 80%" />
        <el-button
          round
          style=" border-radius: 0;
            background-color: rgb(22, 155, 213);
            color: white;
          "
          >搜索</el-button
        >
      </div>
    </div>

    <!--  -->
    <div
      style="
        width: 10%;
        background-color: rgb(22, 155, 213);
        text-align: center;
        margin-right: 10%;
        color: white;
        padding-top: 5px;
      "
    >
      <!-- 新增报表 -->
      新增报表
    </div>
  </div>

  <div id="maxbox3" style="margin-top: 30px">
    <!-- 表单 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed="left" prop="id" label="序号" width="80" />
      <el-table-column prop="result" label="报表名称" width="320" />
      <el-table-column prop="link" label="统计部门" width="160" />
      <el-table-column prop="theme" label="时间区间" width="160" />
      <el-table-column prop="state" label="用途" width="160" />
      <el-table-column prop="updatetime" label="图表" width="160" />
      <el-table-column prop="address" label="制作人" width="160" />
      <el-table-column prop="address" label="制作日期" width="160" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >查看</el-button
          >
          <el-button link type="primary" size="small">导出</el-button>
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
    <!-- 分页 -->
    <!--justify-content: center 弹性，居中 -->
    <div class="page" style="display: flex;justify-content: center;margin-top: 30px;">
    <el-pagination background layout="prev, pager, next" :total="100" />
  </div>
</template>
  
  <script lang="ts" setup>
import { ref,onMounted,reactive} from "vue";
import axios from 'axios'
const dateinput = ref();
const input = ref("");
const values = "";
const inputblur = function () {
  console.log(dateinput.value);
};


//以下是表格
const handleClick = () => {
  console.log("click");
};

// const tableData:any = [
  // {
  //   id: "1",
  //   date: "南关区基础设施扩建项目招标流程从哪里能收集相关信息",
  //   name: "城兴物业管理有限公司",
  //   state: "建设用地审批",
  //   city: "临海市南关区",
  //   address: "市发改委基建办",
  //   zip: "2019-06-04 04:27:34",
  //   tag: "审批时间",
  //   tag2: "李天然",
  //   phone: "13569847896",
  // },
  // {
  //   id: "2",
  //   date: "南关区基础设施扩建项目招标流程从哪里能收集相关信息",
  //   name: "城兴物业管理有限公司",
  //   state: "建设用地审批",
  //   city: "临海市南关区",
  //   address: "市发改委基建办",
  //   zip: "2019-06-04 04:27:34",
  //   tag: "审批时间",
  //   tag2: "李天然",
  //   phone: "13569847896",
  // },
  // {
  //   id: "3",
  //   date: "南关区基础设施扩建项目招标流程从哪里能收集相关信息",
  //   name: "城兴物业管理有限公司",
  //   state: "建设用地审批",
  //   city: "临海市南关区",
  //   address: "市发改委基建办",
  //   zip: "2019-06-04 04:27:34",
  //   tag: "审批时间",
  //   tag2: "李天然",
  //   phone: "13569847896",
  // },
  // {
  //   id: "4",
  //   date: "南关区基础设施扩建项目招标流程从哪里能收集相关信息",
  //   name: "城兴物业管理有限公司",
  //   state: "建设用地审批",
  //   city: "临海市南关区",
  //   address: "市发改委基建办",
  //   zip: "2019-06-04 04:27:34",
  //   tag: "审批时间",
  //   tag2: "李天然",
  //   phone: "13569847896",
  // },
  // {
  //   id: "5",
  //   date: "南关区基础设施扩建项目招标流程从哪里能收集相关信息",
  //   name: "城兴物业管理有限公司",
  //   state: "建设用地审批",
  //   city: "临海市南关区",
  //   address: "市发改委基建办",
  //   zip: "2019-06-04 04:27:34",
  //   tag: "审批时间",
  //   tag2: "李天然",
  //   phone: "13569847896",
  // },
  // {
  //   id: "6",
  //   date: "南关区基础设施扩建项目招标流程从哪里能收集相关信息",
  //   name: "城兴物业管理有限公司",
  //   state: "建设用地审批",
  //   city: "临海市南关区",
  //   address: "市发改委基建办",
  //   zip: "2019-06-04 04:27:34",
  //   tag: "审批时间",
  //   tag2: "李天然",
  //   phone: "13569847896",
  // },
// ];

let tableData:any =ref([])
// let arr=[1,23,3]
// tableData.value.push(arr)
// console.log(tableData)
onMounted(()=>{
                 //async getdata代表getdata是一个异步请求
              //await 不管下面做什么，都要等传回数据之后再做
               axios({
                method: 'post',
                url: 'http://1.14.73.59:8080/sp/allselect',
                params: {
                  currentPage:1,
                  pageSize:1    
                }
              }).then((res:any) => {
                // tableData.push(res)
                // console.log(tableData)
               // console.log(JSON.parse(res.data.data))

                //JSON.parse(res.data.data)
                
                tableData.value.push(JSON.parse(res.data.data))
                // tableData.value=JSON.parse(res.data.data)报错
                console.log(tableData)
              })
            })
</script>


  <style scoped>
.dateinput {
  width: 120px;
  height: 26px;
  
}
</style>